<template>
  <div class="home">
    <div class="top">
      <div class="left">
        <span class="lbtn" @click="goHome">首页</span>
      </div>
      <div class="center">
        <div class="title">用户画像分析</div>
      </div>
      <div class="right">
        <span class="rbtn">统计报告</span>
      </div>
    </div>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card
          style="width: 100%; height: 330px; margin-bottom: 20px; background: url(./images/bg1.png)"
        >
          <div id="line" ref="lineChart"></div>
        </el-card>

        <!-- <el-card class="table" shadow="always" style="margin-bottom: 50px;background: url(./images/bg1.png);">
                    <el-table :data="dateinformation2" style="width: 100%;">

                        <el-table-column prop="name" label="餐厅名称" width="180" />
                        <el-table-column prop="number" label="总订单数" width="180">
                        </el-table-column>
                        <el-table-column prop="money" label="总销售量" />
                    </el-table>
                </el-card> -->

        <div class="bar-pie1">
          <el-card style="width: 100%; height: 370px; background: url(./images/bg1.png)">
            <div id="bar1" ref="barChart1"></div>
          </el-card>
        </div>
      </el-col>

      <el-col :span="16">
        <!-- <el-card style="width: 100%; height: 330px; margin-bottom: 20px;background: url(./images/bg1.png);">
                    <div id="line" ref="lineChart"></div>
                </el-card> -->

        <el-card
          style="width: 100%; height: 330px; margin-bottom: 30px; background: url(./images/bg1.png)"
        >
          <div id="line1"></div>
          <div class="table-container">
            <el-table :data="foodmenu2" height="250" style="width: 100%">
              <el-table-column type="index" label="编号" width="180" />
              <el-table-column prop="username" label="回头客名称" width="180" />
              <el-table-column property="picture" label="图片" width="180">
                <template v-slot="scope">
                  <img :src="scope.row.image" min-width="70" height="70" />
                </template>
              </el-table-column>
              <el-table-column prop="phone" label="联系方式" width="180" />

              <el-table-column prop="number" label="消费次数" width="180" />
            </el-table>
          </div>
        </el-card>

        <div class="bar-pie">
          <el-card style="width: 49%; height: 360px; background: url(./images/bg1.png)">
            <div id="bar" ref="barChart"></div>
          </el-card>

          <el-card style="width: 49%; height: 360px; background: url(./images/bg1.png)">
            <div id="pie" ref="pieChart"></div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import axios from 'axios'
import { useRouter, useRoute } from 'vue-router'
import { reactive, ref, onMounted } from 'vue'

const router = useRouter()
const route = useRoute()

const reviewmenu = ref([])

const goHome = () => {
  router.push('/Applayout1')
}

type allinformation = {
  //餐厅日销售
  number1: string
  number2: string
  number3: string
  number4: string
  number5: string
  number6: string
  number7: string
  total: string
  avg: string
}
type allinformation1 = {
  //餐厅日销售
  userid: string
  usertypeid: string
  username: string
  password: string
  image: string
  phone: string
  createtime: string
  updatetime: string
  gender: string
  vip: string
  expiretime: string
  age: string
  state: string
  number: string
}
const foodmenu2 = ref([] as allinformation1[])
const dateinformation = ref({} as allinformation)
const dateinformation1 = ref({} as allinformation)
const dateinformation2 = ref({} as allinformation)
const dateinformation3 = ref({} as allinformation)
const fetchData = () => {
  axios({
    method: 'POST',
    params: {
      restaurantid: window.localStorage.getItem('restaurantID')
    },
    url: 'http://localhost:8080/bili/sexratio',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('RestaurantToken')
    }
  }).then((res) => {
    const { data } = res
    dateinformation.value = data.data
    // console.log(dateinformation.value.number1)
    drawCharts()
  })
}
const fetchData1 = () => {
  //年龄
  axios({
    method: 'POST',
    params: {
      restaurantid: window.localStorage.getItem('restaurantID')
    },
    url: '/bili/ageratio',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('RestaurantToken')
    }
  }).then((res) => {
    const { data } = res
    dateinformation1.value = data.data
    // console.log(dateinformation.value.number1)
    drawCharts()
  })
}
const fetchData2 = () => {
  //打包、堂食
  axios({
    method: 'POST',
    params: {
      restaurantid: window.localStorage.getItem('restaurantID')
    },
    url: 'http://localhost:8080/bili/wayratio',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('RestaurantToken')
    }
  }).then((res) => {
    const { data } = res
    dateinformation2.value = data.data
    // console.log(dateinformation.value.number1)
    drawCharts()
  })
}
const fetchData3 = () => {
  //评价投诉
  axios({
    method: 'POST',
    params: {
      restaurantid: window.localStorage.getItem('restaurantID')
    },
    url: 'http://localhost:8080/bili/buyratio',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('RestaurantToken')
    }
  }).then((res) => {
    const { data } = res
    dateinformation3.value = data.data
    //  console.log(dateinformation3.value.number1)
    drawCharts()
  })
}
const fetchData4 = () => {
  //评价投诉
  axios({
    method: 'POST',
    params: {
      restaurantid: window.localStorage.getItem('restaurantID')
    },
    url: 'http://localhost:8080/restaurant/getclient',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('RestaurantToken')
    }
  }).then((res) => {
    const { data } = res
    foodmenu2.value = data.data
  })
}

onMounted(() => {
  fetchData()
  fetchData1()
  fetchData2()
  fetchData3()
  fetchData4()
})

const drawCharts = () => {
  const lineChart = echarts.init(document.getElementById('line'))
  const barChart = echarts.init(document.getElementById('bar'))
  const pieChart = echarts.init(document.getElementById('pie'))
  const lineChart1 = echarts.init(document.getElementById('line1'))
  const barChart1 = echarts.init(document.getElementById('bar1'))

  let sexData = [
    {
      name: '男性',
      value: dateinformation.value.number1
    },
    {
      name: '女性',
      value: dateinformation.value.number2
    }
  ]
  var img =
    ''
  const man =
    ''
  const woman =
    ''

  var data = []
  var color = ['#00FFFF', '#C424FF', '#ffa800', '#ff5b00', '#ff3000']
  sexData.map((item, index) => {
    data.push({
      value: item.value,
      name: item.name,
      itemStyle: {
        normal: {
          borderWidth: 5,
          shadowBlur: 20,
          borderColor: color[index],
          shadowColor: color[index]
        }
      }
    })
  })
  // 绘制折线图
  lineChart.setOption({
    title: {
      text: '男女比例',
      textStyle: {
        align: 'center',
        color: '#fff',
        fontSize: 20
      },
      top: '3%',
      left: '40%'
    },
    backgroundColor: '#132168',
    color: color,
    graphic: {
      elements: [
        {
          type: 'image',
          z: 3,
          style: {
            image: img,
            width: 128,
            height: 128
          },
          left: 'center',
          top: 'center',
          position: [100, 100]
        },
        {
          type: 'image',
          z: 3,
          style: {
            image: woman,
            width: 45,
            height: 70
          },
          left: '50%',
          top: 'center'
        },
        {
          type: 'image',
          z: 3,
          style: {
            image: man,
            width: 45,
            height: 70
          },
          right: '50%',
          top: 'center'
        }
      ]
    },
    tooltip: {
      show: true,
      formatter: function (params) {
        //console.log(params)
        return `<div style="display:flex;align-items:center;"><span style="display:block;width:14px;height:14px;background:${params.color};border-radius:14px;"></span>${params.name}：</div><div>${params.value}人（${params.percent}%）</div>`
      }
    },
    toolbox: {
      show: true
    },
    series: [
      {
        name: '',
        type: 'pie',
        clockWise: false,
        radius: [75, 82],
        hoverAnimation: true,
        itemStyle: {
          normal: {
            label: {
              show: true,
              formatter: function (params) {
                // console.log(params)
                if (params.name !== '') {
                  return `${params.name}:${params.percent}%`
                } else {
                  return ''
                }
              }
            },
            labelLine: {
              show: true
            }
          }
        },
        data: data
      }
    ]
  })

  // 绘制折线图
  lineChart1.setOption({})

  var data1 = [
    {
      text: '总消费人数',
      value: dateinformation3.value.total,
      color: '#5dd054'
    },
    {
      text: '总评论人数',
      value: dateinformation3.value.number1,
      color: '#097ff9'
    },
    {
      text: '总投诉人数',
      value: dateinformation3.value.number2,
      color: '#ff6804'
    }
  ]

  function dataFormat(
    v = {
      value: '12345,12',
      color: '#5dd054'
    }
  ) {
    return [
      {
        value: 0,
        name: v.value,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#00feff'
              },
              {
                offset: 1,
                color: v.color
              }
            ])
          }
        },
        label: {
          normal: {
            textStyle: {
              fontSize: 30,
              fontWeight: 500,
              color: '#fff'
            }
          }
        }
      }
    ]
  }

  function childrenFun(str = '按钮') {
    return [
      {
        type: 'rect',
        left: 'center',
        top: 'center',
        shape: {
          width: 150,
          height: 40,
          r: 20
        },
        style: {
          fill: '#4709f9',
          shadowColor: '#f909a1',
          shadowOffsetX: 3,
          shadowOffsetY: 3,
          lineWidth: 2,
          shadowBlur: 10
          //   stroke: '#00feff'
        }
      },
      {
        type: 'text',
        left: 'center',
        top: 'center',
        style: {
          fill: '#fff',
          text: str,
          font: '14px Microsoft YaHei'
        }
      }
    ]
  }
  barChart.setOption({
    backgroundColor: '#04184A',
    legend: {
      show: false
    },
    tooltip: {
      show: false
    },
    series: [
      {
        type: 'pie',
        radius: [65, 73],
        center: ['18%', '40%'],
        hoverAnimation: false,
        label: {
          normal: {
            position: 'center'
          }
        },
        data: dataFormat(data1[0])
      },
      {
        type: 'pie',
        radius: [65, 73],
        center: ['50%', '40%'],
        hoverAnimation: false,
        label: {
          normal: {
            position: 'center'
          }
        },
        data: dataFormat(data1[1])
      },
      {
        type: 'pie',
        radius: [65, 73],
        center: ['82%', '40%'],
        hoverAnimation: false,
        label: {
          normal: {
            position: 'center'
          }
        },
        data: dataFormat(data1[2])
      }
    ],
    graphic: {
      elements: [
        {
          type: 'group',
          left: '2%',
          bottom: '20%',
          z: 100,
          children: childrenFun(data1[0].text)
        },
        {
          type: 'group',
          left: '36%',
          bottom: '20%',
          z: 100,
          children: childrenFun(data1[1].text)
        },
        {
          type: 'group',
          left: '69%',
          bottom: '20%',
          z: 100,
          children: childrenFun(data1[2].text)
        }
      ]
    }
  })

  var labelShow = {
    show: true,
    color: '#fff',
    fontSize: 15,
    formatter: ['{d| {d}% }', '{b| {b} }'].join('\n'),
    rich: {
      d: {
        fontSize: 15,
        color: '#fff'
      },
      b: {
        fontSize: 18,
        color: '#fff'
      }
    }
  }

  // 绘制柱状图
  barChart1.setOption({
    backgroundColor: '#05274C',
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      orient: 'horizontal',
      left: 'left',
      textStyle: {
        color: '#fff'
      },
      data: ['10岁以下', '10-20岁', '20-30岁', '30-40岁', '40-50岁', '50-60岁', '60岁以上']
    },
    series: [
      {
        name: '年龄分布',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: [
          { value: dateinformation1.value.number1, name: '10岁以下', label: labelShow },
          { value: dateinformation1.value.number2, name: '10-20岁', label: labelShow },
          { value: dateinformation1.value.number3, name: '20-30岁', label: labelShow },
          { value: dateinformation1.value.number4, name: '30-40岁', label: labelShow },
          { value: dateinformation1.value.number5, name: '40-50岁', label: labelShow },
          { value: dateinformation1.value.number6, name: '50-60岁', label: labelShow },
          { value: dateinformation1.value.number7, name: '60岁以上', label: labelShow }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  })

  // 绘制饼图
  pieChart.setOption({
    title: {
      text: '就餐方式',
      textStyle: {
        align: 'center',
        color: '#fff',
        fontSize: 20
      },
      top: '3%',
      left: '0%'
    },
    backgroundColor: '#0e202d',
    grid: {
      top: '15%',
      left: '15%',
      bottom: '-15%',
      right: '10%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['打包', '堂食'],
        axisTick: {
          alignWithLabel: true
        },
        nameTextStyle: {
          color: '#82b0ec'
        },
        axisLine: {
          lineStyle: {
            color: '#82b0ec'
          }
        },
        axisLabel: {
          textStyle: {
            color: '#82b0ec'
          },
          formatter: function (value, index) {
            if (value === '打包' || value === '堂食') {
              return `{title|${value}}\n\n\n` + ' ' // 使用'\n'来实现向下的效果
            } else {
              return value
            }
          },
          rich: {
            title: {
              height: 40,
              lineHeight: 40,
              align: 'center',
              color: '#82b0ec'
            }
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          textStyle: {
            color: '#82b0ec'
          },
          formatter: '{value}%'
        },
        splitLine: {
          lineStyle: {
            color: '#0c2c5a'
          }
        },
        axisLine: {
          show: false
        }
      }
    ],
    series: [
      {
        name: '',
        type: 'pictorialBar',
        symbolSize: [60, 16],
        symbolOffset: [0, -10],
        symbolPosition: 'end',
        z: 12,
        //"barWidth": "20",
        label: {
          normal: {
            show: true,
            position: 'top',
            formatter: '{c}%'
          }
        },
        data: [
          {
            value:
              (parseInt(dateinformation2.value.number1) / parseInt(dateinformation2.value.total)) *
              100,
            itemStyle: {
              color: '#59cb42'
            }
          },
          {
            value:
              (parseInt(dateinformation2.value.number2) / parseInt(dateinformation2.value.total)) *
              100,
            itemStyle: {
              color: '#3cefff'
            }
          }
        ]
      },
      {
        name: '',
        type: 'pictorialBar',
        symbolSize: [60, 16],
        symbolOffset: [0, 10],
        // "barWidth": "20",
        z: 12,
        data: [
          {
            value:
              (parseInt(dateinformation2.value.number1) / parseInt(dateinformation2.value.total)) *
              100,
            itemStyle: {
              color: '#59cb42'
            }
          },
          {
            value:
              (parseInt(dateinformation2.value.number2) / parseInt(dateinformation2.value.total)) *
              100,
            itemStyle: {
              color: '#3cefff'
            }
          }
        ]
      },
      {
        name: '',
        type: 'pictorialBar',
        symbolSize: [90, 30],
        symbolOffset: [0, 20],
        z: 10,
        itemStyle: {
          normal: {
            color: 'transparent',
            borderColor: '#14b1eb',
            borderType: 'dashed',
            borderWidth: 5
          }
        },
        data: [
          (parseInt(dateinformation2.value.number1) / parseInt(dateinformation2.value.total)) * 100,
          (parseInt(dateinformation2.value.number2) / parseInt(dateinformation2.value.total)) * 100
        ]
      },
      {
        type: 'bar',
        itemStyle: {
          normal: {
            //color: '#14b1eb',
            opacity: 0.7
          }
        },
        //silent: true,
        barWidth: '60',
        //barGap: '-100%', // Make series be overlap
        data: [
          {
            value:
              (parseInt(dateinformation2.value.number1) / parseInt(dateinformation2.value.total)) *
              100,
            itemStyle: {
              color: '#59cb42'
            }
          },
          {
            value:
              (parseInt(dateinformation2.value.number2) / parseInt(dateinformation2.value.total)) *
              100,
            itemStyle: {
              color: '#3cefff'
            }
          }
        ],
        markLine: {
          symbol: 'none',
          label: {
            position: 'middle',
            formatter: '{b}'
          }
        }
      }
    ]
  })

  // 监听窗口大小变化，自适应图表
  window.addEventListener('resize', () => {
    lineChart.resize()
    barChart.resize()
    pieChart.resize()
    lineChart1.resize()
    barChart1.resize()
  })
}
</script>
<style scoped>
.el-table {
  --el-table-border-color: transparent;
  --el-table-border: none;
  --el-table-text-color: #bdbdbe;
  --el-table-header-text-color: #bdbdbe;
  --el-table-row-hover-bg-color: transparent;
  --el-table-current-row-bg-color: transparent;
  --el-table-header-bg-color: transparent;
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-expanded-cell-bg-color: transparent;
}

.home {
  width: 100%;
  height: 888px;
  background: url(./images/bg1.png) no-repeat;
  background-size: cover;

  .user-info {
    display: flex;
    align-items: center;

    .user-img {
      width: 150px;
      height: 150px;
      border-radius: 100%;
      margin-right: 40px;
    }

    & li:nth-child(1) {
      font-size: 30px;
    }

    & li:nth-child(2) {
      margin-top: 10px;
      font-size: 16px;
      color: rgb(153, 153, 153);
    }
  }

  .login-info {
    font-size: 14px;
    color: rgb(153, 153, 153);

    li {
      margin: 5px;

      span {
        margin-left: 50px;
      }
    }
  }

  .table {
    margin-top: 30px;
  }

  .num {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .el-card {
      width: 32%;
      height: 90px;
      margin-bottom: 20px;
      border: none;

      i {
        width: 90px;
        height: 100%;
        line-height: 90px;
        text-align: center;
        font-size: 30px;
        color: #fff;
      }

      ul {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 20px;

        li:nth-child(1) {
          font-size: 30px;
          color: #000;
          margin-bottom: 5px;
        }

        li:nth-child(2) {
          font-size: 15px;
          color: rgb(148, 148, 148);
        }
      }
    }
  }

  #line {
    width: 100%;
    height: 280px;
  }

  #line1 {
    width: 100%;
    height: 0px;
  }

  .bar-pie {
    width: 100%;
    display: flex;
    justify-content: space-between;

    #pie {
      width: 100%;
      height: 300px;
    }

    #bar {
      width: 100%;
      height: 300px;
    }
  }

  .bar-pie1 {
    width: 100%;
    display: flex;
    justify-content: space-between;

    #bar1 {
      width: 100%;
      height: 330px;
    }
  }
}

.top {
  width: 100%;
  height: 40px;
  display: flex;
  margin-bottom: 5%;

  .left {
    flex: 1.5;
    background: url(./images/dataScreen-header-left-bg.png) no-repeat;
    background-size: cover;

    .lbtn {
      width: 150px;
      height: 40px;
      float: right;
      background: url(./images/dataScreen-header-btn-bg-l.png) no-repeat;
      background-size: 100% 100%;
      text-align: center;
      line-height: 40px;
      color: #29fcff;
      font-size: 20px;
    }
  }

  .center {
    flex: 2;

    .title {
      width: 100%;
      height: 74px;
      background: url(./images/dataScreen-header-center-bg.png) no-repeat;
      background-size: 100% 100%;
      text-align: center;
      line-height: 74px;
      color: #29fcff;
      font-size: 30px;
    }
  }

  .right {
    flex: 1.5;
    background: url(./images/dataScreen-header-left-bg.png) no-repeat;
    background-size: cover;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .rbtn {
      width: 150px;
      height: 40px;
      background: url(./images/dataScreen-header-btn-bg-r.png) no-repeat;
      background-size: 100% 100%;
      text-align: center;
      line-height: 40px;
      color: #29fcff;
    }

    .time {
      color: #29fcff;
      font-size: 20px;
    }
  }
}
</style>
